<template>
	<!-- 首页/搜索页 -->
	<view class="search">
		<u-navbar class="search-navbar" :is-back="false" :background="{ background: '#EFF3F4' }" :border-bottom="false">
			<view class="nav-center">
				<u-search v-model="keyword" placeholder="请输入内容" shape="square" bg-color="#fff" @search="search()"
					:show-action="false" height="56"></u-search>
			</view>
			<view slot="right" class="nav-right" @click="returnPrevious">取消</view>
		</u-navbar>
		<!-- 历史搜索 -->
		<template v-if="showRecord">
			<view class="search-record">
				<view class="search-record-head" v-if="records.length > 0">
					<view class="left-box">
						<text class="record">历史搜索</text>
					</view>
					<view class="right-box">
						<text class="clear" @click="delRecord('all')">清空</text>
					</view>
				</view>
				<view class="flex flex-wrap mt-20">
					<view class="mr-20 my-10 p-10 border rounded text-24 relative record-item"
						v-for="(item,index) in records" :key="index" @longpress="editState(index)"
						@click="setKeyword(item)">
						<text>{{item.name}}</text>
						<u-icon v-if="item.edit" size="16" class="close-tag" name="close"
							@click="delRecord('single',index)">
						</u-icon>
					</view>
				</view>
			</view>
			<!-- 热搜 -->
			<view class="search-hot">
				<view class="search-hot-head">
					<text class="record">热门搜索</text>
				</view>
				<view class="search-hot-content">
					<view v-for="(item,index) in hots" :key="index" class="content-item" @click="setKeyword(item)">
						<text>{{item.name}}</text>
						<u-icon v-if="item.isHot" class="item-right" name="arrow-upward" color="#ff5500"
							size="22"></u-icon>
					</view>
				</view>
			</view>
		</template>


		<!-- 资讯列表 -->
		<template v-if="!showRecord">
			<view class="user-choose" v-if="showUserChoose">
				<u-dropdown class="choose-dropdown" :border-bottom="true">
					<u-dropdown-item class="u-dropdown" v-model="dropdownValue" title="地区" :options="options"
						@change="dropdownChange"></u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="search-post" v-if="list.length>0">
				<view class="post-box">
					<scroll-view class="scroll" ref="scrollView" scroll-y="true"  @scrolltolower="reachBottom()">
						<view class="post-box-head">相关帖子</view>
						<view class="post-box-content">
							<search-post :list="list" :keyword="keyword"></search-post>
							<u-loadmore :status="loadStatus"></u-loadmore>
						</view>
					</scroll-view>
				</view>
			</view>
			<u-empty v-if="showEmpty" text="本来无一物,何处惹尘埃" src="/static/platform/svg/winter.svg" font-size="32"
				icon-size="320" mode="list"></u-empty>
		</template>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import SearchPost from "@/pages/platform/post/search-post.vue"


	export default {
		components: {
			SearchPost
		},
		data() {
			return {
				keyword: '',
				showRecord: true,
				showEmpty: false,
				showUserChoose: false,
				records: [],
				hots: [{
						name: '上线',
						isHot: true
					},
					{
						name: '评论',
						isHot: true
					},
					{
						name: '测试',
						isHot: false
					}
				],
				dropdownValue: 1,
				options: [{
						label: '不限',
						value: 0
					},
					{
						label: '本地区',
						value: 1
					}
				],
				list: [],
				loadStatus: undefined,
				queryParam: {
					pageNo: 0,
					pageSize: 10,
					regionId: undefined,
					content: undefined
				}
			}
		},
		onLoad() {
			this.setQueryParamSecion()
		},
		watch: {
			keyword: {
				deep: true,
				handler(newVal, oldVal) {
					if (newVal.length > 0) {
						this.showRecord = false
					} else {
						this.showRecord = true
						this.showUserChoose = false
						this.resetQuery()
					}
				}
			}
		},
		methods: {
			reachBottom() {
				if (this.loadStatus !== "nomore") {
					this.getNextPostList()
				}
			},
			setQueryParamSecion() {
				if (this.$store.state.region) {
					this.queryParam.regionId = this.$store.state.region.id
				}else {
					this.dropdownValue=0
					this.options.splice(1,1)
				}
			},
			resetQuery() {
				this.list = []
				this.queryParam.pageNo = 0
				this.dropdownValue = 1
				this.setQueryParamSecion()
				this.loadStatus = "loadmore"
			},
			setKeyword(item) {
				this.keyword = item.name
				this.search()
			},
			dropdownChange(value) {
				if (value === 0) {
					this.queryParam.regionId = undefined
				} else if (value === 1) {
					this.setQueryParamSecion()
				}
				this.search()
			},
			getPostList() {
				this.loadStatus = "loading"
				this.$u.api.postData.getKeyWordPostList(this.queryParam).then(res => {
					if (res.data.records.length > 0) {
						this.showEmpty = false
					} else {
						this.showEmpty = true
					}
					this.list = res.data.records
					this.setLoadStatus(this.list.length, this.queryParam.pageSize)
				})
			},
			getNextPostList(sectionId) {
				this.queryParam.pageNo += 1
				this.loadStatus = "loading"
				this.$u.api.postData.getKeyWordPostList(this.queryParam).then(res => {
					if (res.data.records.length > 0) {
						this.list.push(...res.data.records)
						this.setLoadStatus(res.data.records.length, this.queryParam.size)
					} else {
						this.loadStatus = "nomore"
					}
				})
			},
			setLoadStatus(length, size) {
				if (length < size) {
					this.loadStatus = "nomore"
				} else {
					this.loadStatus = "loadmore"
				}
			},
			returnPrevious() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			// 搜索
			search() {
				// 数据校验
				if (this.keyword === '') {
					return this.$refs.uToast.show({
						type: 'error',
						title: '请输入搜索内容'
					})
				}
				// 收起键盘
				uni.hideKeyboard()
				// 加载中
				uni.showLoading({
					title: '加载中',
				})
				this.showUserChoose = true
				this.queryParam.content = this.keyword
				uni.hideLoading()
				this.getPostList()
				if (this.records.findIndex(item => item.name === this.keyword) === -1) {
					this.records.push({
						name: this.keyword,
						edit: false
					})
				}
			},
			// 删除记录
			delRecord(type, index = 0) {
				let that = this
				let tip = type === 'all' ? "确定删除全部历史记录吗？删除后无法恢复" :
					"确定删除当前历史记录吗？删除后无法恢复"
				uni.showModal({
					title: '删除记录',
					content: tip,
					success(res) {
						if (res.confirm === true) {
							if (type === 'all') that.records = []
							else that.records.splice(index, 1)
						}
					}
				})
			},
			// 编辑状态
			editState(index) {
				this.records = this.records.map(item => {
					if (item.edit === true) {
						item.edit = false
						return item
					}
					return item
				})
				this.records[index].edit = this.records[index].edit ? !this.records[index].edit : true
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}


	.search {
		.search-navbar {

			.nav-center {
				width: 100%;
				margin-left: 20rpx;
			}

			.nav-right {
				font-size: 14px;
				line-height: 14px;
				margin: 0 20rpx;
			}
		}


		.search-record {
			margin: 30rpx;

			.search-record-head {

				display: flex;
				font-size: 13px;

				.left-box {
					display: flex;
					flex: 1;
					justify-content: flex-start;

					.record {
						display: flex;
						font-weight: 700;
					}
				}

				.right-box {
					display: flex;
					justify-content: flex-end;

					.clear {
						color: #999;
					}
				}
			}

			.record-item {
				background: #EFF3F4;
			}

			.close-tag {
				position: absolute;
				top: -10rpx;
				right: -4px;

			}

		}

		.search-hot {
			margin: 30rpx;

			.search-hot-head {
				font-size: 13px;

				.record {

					font-weight: 700;
				}
			}

			.search-hot-content {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.content-item {
					margin-top: 16rpx;
					width: 50%;
					display: flex;
					justify-content: start;
					box-sizing: border-box;

					.item-right {
						margin-left: 10rpx;
					}

				}
			}
		}


		.user-choose {
			display: flex;
			background: #EFF3F4;

			.choose-dropdown {
				display: flex;
				flex: 1
			}
		}

		.search-post {
			background-color: #EFF3F4;
			padding-top: 10rpx;

			.post-box {
				padding-top: 10rpx;
				border-radius: 20rpx;
				background: #fff;

				.scroll {
					height: calc(100vh - 250rpx);
				}

				.post-box-head {
					margin: 30rpx;
					margin-bottom: 40rpx;
					font-size: 14px;
					font-weight: 700;
				}

				.post-box-content {}

			}
		}


	}
</style>